<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0; list-style:none;}
.out{width:980px;height:300px;border:1px solid #111; margin:0 auto;}
.top{width:980px;height:30px;}
.text{width:300px; height:30px; float:right;}
.top .title{color:red;font-size:14px;text-decoration:none;line-height:30px;margin-right:10px;}
.big{width:980px; height:270px;margin:0 auto; position:relative}
.left{ position:absolute; height:40px; width:25px;left:5px;top:50%;margin-top:-20px;background:red;color:#fff; font-size:14px; font-weight:bold; text-align:center; line-height:40px;cursor:pointer;}
.right{ position:absolute; height:40px; width:25px;right:5px;top:50%;margin-top:-20px; background:red;color:#fff; font-size:14px; font-weight:bold; text-align:center; line-height:40px;cursor:pointer;}
.windows{width:895px;height:230px;margin:0 auto; border:1px solid red; position:relative; overflow:hidden;}
.box{ position:absolute;top:0;left:0;height:230px;width:5000px;}
.smallbox{ float:left;width:895px;height:230px;border:1px solid bule; }
.smallbox .img{width:175px; height:230px; float:left;margin-right:4px; position:relative;}
.num{ position:absolute;top:0;left:0;width:15px; height:15px;background:red;color:#fff; text-align:center; line-height:15px;}
.smallbox .info{width:175px; height:48px; background:#000;color:#fff; text-align:center; line-height:48px;}
.btn{ width:105px; height:11px; margin:0 auto;padding-top:10px;}
.btn li{width:11px; height:11px; float:left; background:url(../img/btn.png) no-repeat;margin:0 5px; cursor:pointer;}
.btn li.on{background:url(../img/btn_on.png) no-repeat}

</style>
<script src="../pengxuan.js"></script>
<script src="../animate.js"></script>
<script>
var t;
window.onload=function(){
	//初始化box的显示状态
	var boxs=getClass('box');
	for(var i=1;i<boxs.length;i++){
		boxs[i].style.display='none';	
	};	
	
	
	//获取所有选项卡
	var titles=getClass('title');
	for(var i=0;i<titles.length;i++){
		titles[i].index=i;
		titles[i].onmouseover=function(){
			for(var j=0;j<titles.length;j++){
				titles[j].style.color='red';
				boxs[j].style.display='none';	
			};	
			boxs[this.index].style.display='block';
			this.style.color='#111';
			
			main(boxs[this.index]);
		};	
	};
	main(boxs[0]);
};

function main(obj){
	clearInterval(t);
	//最外层的大盒子
	var big=getClass('big')[0];
	//可视区
	var windows=getClass('windows',big)[0];
	//包含图片的大盒子
	//var box=getClass('box',windows)[0];
	
	//设置顺序
	var nums=getClass('num',obj);
	for(var i=0;i<nums.length;i++){
		nums[i].innerHTML=i+1;	
	};
	//获取所有的小盒子
	var smallbox=getClass('smallbox',obj);
	if(smallbox.length<5){
	var newsmall=smallbox[0].cloneNode(true);
		obj.appendChild(newsmall);
	}
	//获取所有小盒子的个数
	var smallnum=smallbox.length;
	//获取小盒子的宽度
	var smallwidth=smallbox[0].offsetWidth;
	//重设box的宽度
	obj.style.width=smallnum*smallwidth+'px';
	//左边的按钮
	var leftb=getClass('left',big)[0];
	//右边的按钮
	var rightb=getClass('right',big)[0];
	//按钮集合
	var btns=getClass('btn',big)[0].getElementsByTagName('li');
	var num=0;
	//运动的核心函数
	function move(){
		num++;
		if(num==smallnum-1){
			animate(obj,{left:-num*smallwidth},1000,Tween.Quad.easeIn,function(){
				obj.style.left=0;	
			});
			num=0;	
		}else{
			animate(obj,{left:-num*smallwidth},1000,Tween.Quad.easeIn)	
		}	
		for(var i=0;i<btns.length;i++){
			btns[i].className="";	
		}
		btns[num].className="on";
	};
	t=setInterval(move,2000);
	//所有的按钮加事件
	for(var i=0;i<btns.length;i++){
		btns[i].index=i;
		btns[i].onmouseover=function(){
			clearInterval(t);
			for(var j=0;j<btns.length;j++){
				btns[j].className='';	
			};	
			this.className='on';
			num=this.index;
			animate(obj,{left:-num*smallwidth},1000,Tween.Quad.easeIn)
		};	
		btns[i].onmouseout=function(){
			t=setInterval(move,2000)	
		};
	};
	
	//给左边的按钮添加事件
	leftb.onclick=function(){
		clearInterval(t);
		move();	
	};
	leftb.onmouseout=function(){
		t=setInterval(move,2000);	
	};
	leftb.onmouseover=function(){
		clearInterval(t);	
	};
	
	//给右边的按钮添加事件
	rightb.onclick=function(){
		clearInterval(t);
		if(num==0){
			obj.style.left=-(smallnum-1)*smallwidth+'px';
			num=smallnum-1;
			num--;
			animate(obj,{left:-num*smallwidth},1000,Tween.Quad.easeIn)	
		}else{
			num--;
			animate(obj,{left:-num*smallwidth},1000,Tween.Quad.easeIn)	
		}	
		for(var i=0;i<btns.length;i++){
			btns[i].className="";	
		}
		btns[num].className="on";
	}
	rightb.onmouseout=function(){
		t=setInterval(move,2000)	
	};
	rightb.onmouseover=function(){
		clearInterval(t);	
	};
		
};
</script>


</head>

<body>
<div class="out">
	<div class="top">
    	<div class="text">
            <a class="title" href="#">男装</a>
            <a class="title" href="#">化妆品</a>
            <a class="title" href="#">家具用品</a>
        </div>
    </div>
    <div class="big">
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
        <div class="windows">
            <ul class="box">
                <li class="smallbox">
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                </li>
                <li class="smallbox">
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                </li>
                <li class="smallbox">
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                </li>
                <li class="smallbox">
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/1.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                </li>
            </ul>
            <ul class="box">
                <li class="smallbox">
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                </li>
                <li class="smallbox">
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                </li>
                <li class="smallbox">
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                </li>
                <li class="smallbox">
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/2.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                </li>
            </ul>
            <ul class="box">
                <li class="smallbox">
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                </li>
                <li class="smallbox">
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                </li>
                <li class="smallbox">
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                </li>
                <li class="smallbox">
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                    <div class="img">
                        <div class="num"></div>
                        <img src="../img/3.jpg" width="175" height="180" />
                        <div class="info">男装</div>
                    </div>
                </li>
            </ul>
        </div>
        <ul class="btn">
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
        </ul>
    </div>
</div>
</body>
</html>
